<template>
  <div class="pug-checkbox-group pug-checkbox-group-outline pug-pro-field-checkbox-horizontal">
    <label class="pug-checkbox-wrapper" @click.prevent="selectItem(index)"
           :class="[item.active?'pug-checkbox-checked':'']"
           v-for="(item,index) in itemsList"
           :key="index">
      <span class="pug-checkbox"><input type="checkbox" :id="cref" class="pug-checkbox-input" :value="item.value"/>
      <span class="pug-checkbox-inner"></span></span><span>{{ item.text }}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "PugCheckbox",
  data() {
    return {
      itemsList: []
    }
  },
  props: {
    modelValue: String,
    cref:{
      type:String,
      default:""
    },
    selectIndex: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default: [{text: '爬山', value: 1}, {text: '游泳', value: 0}, {text: '逛街', value: 2}]
    },
    isValue: {
      type: Boolean,
      default: false
    },
  },

  created() {
    this.$props.items.forEach(item => item.active = false);
    this.itemsList = this.$props.items
  },

  methods: {
    selectItem(index) {
      this.itemsList[index].active = !this.itemsList[index].active;
      var selectItems = this.itemsList.filter(item => item.active);
      var keys = [];
      var values = [];
      selectItems.forEach(item => {
        keys.push(item.text);
        values.push(item.value);
      })
      this.$emit("update:modelValue", this.$props.isValue ? values : keys);
      this.$emit("change", selectItems);
    }
  }
}
</script>

<style scoped>

</style>
